<template>
	<view class="item" @click="goToDetail(item.id)">
		<!-- <view></view> -->
		<view class="content u-flex-y-center">
			<view class="image">
				<u--image :showLoading="true" :src="imagesrc" radius="10" width="80px" height="80px"></u--image>
			</view>

			<view style="width: 0;flex: 1;">
				<view class="title">
					<view class="u-line-1" style="flex: 1;">
						{{ item.productName||'' }}
					</view>
					<view class="">
						<u-tag :text="activeauditStatus.label" size="mini" :type="activeauditStatus.color"></u-tag>
					</view>
				</view>
				<view class="subtitle">{{ levelTypestr() }} </view>

				<view class="labelbox">
					<text v-for="(litem, lindex) in labels" :key="lindex"
						:style="{ backgroundColor: litem.attrs.bgColor }">{{ litem.text }}</text>
				</view>
				<view class="price" v-if="item.unitPrice && item.unitPrice != 0">
					<text>￥</text>
					<text class="priceMin">{{ item.unitPrice || 0 }}</text>
					<text class="unit" v-if="item.unit&&item.unit!='null'">{{ item.unit }}</text>

				</view>
			</view>
		</view>
		<view class="btnbox u-flex-y-center">
			<view class="effectDate" v-if="item.startTime && item.endTime&&item.auditStatus==1&&day>0">
				<view>
					{{ `有效期:${$u.timeFormat(item.startTime, "yyyy-mm-dd")} ~ ${$u.timeFormat(item.endTime, "yyyy-mm-dd")}` }}
				</view>
				<view :class="{dayerr:day<=7}" class="day">{{ `距离商品下线：${day}天` }}</view>
			</view>
			<view v-else></view>
			<u-button size="mini" :customStyle="btncustomStyle" text="查看详情" @click="goToRelease()"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		name: "goodsitem",
		props: {
			item: {
				type: Object,
				default: () => {
					return {};
				},
			},
			dicts: {
				type: Object,
				default: () => {
					return {};
				},
			},
			levelTypeList: {
				type: Array,
				default: () => {
					return [];
				},
			},
		},
		data() {
			return {
				btncustomStyle: {
					width: "auto",
					margin: "0 10rpx 0 0",
					minWidth: "auto",
					height: "30px",
					padding: "0 20rpx",
				},
				// 0待审核 1已通过 2审核失败 3草稿
				// success / info / warning / error
				auditStatus: [{
						value: "0",
						label: "待审核",
						color: "primary",
					},
					{
						value: "1",
						label: "已通过",
						color: "success",
					},
					{
						value: "2",
						label: "审核失败",
						color: "error",
					},
					{
						value: "3",
						label: "草稿",
						color: "warning",
					},
				]
			};
		},
		computed: {
			day() {
				if (!this.item.endTime) {
					return 0
				}
				let r = this.$u.timefn.getUTCtimeceil('', this.$u.timeFormat(this.item.endTime, "yyyy-mm-dd"), 60 * 60 *
					24)
				return r >= 0 ? r : 0
			},
			activeauditStatus() {
				return this.auditStatus.find((item) => {
					return item.value == this.item.auditStatus;
				}) || {};
			},
			imagesrc() {
				let r = (this.item.imagesUrl || '').split(",");

				return r[0];
			},

			labels() {
				let r = [];
				try {
					let dqtransactionalMode = this.dicts["transactional_mode"].find(
						(item) => {
							return item.value == this.item.transactionalMode;
						}
					);
					if (dqtransactionalMode) {
						r.push({
							text: dqtransactionalMode.label,
							attrs: {
								bgColor: "#F3B367"
							},
						});
					}
					// manage_model
					let dqmanage_model = this.dicts["manage_model"].find((item) => {
						return item.value == this.item.manageModel;
					});

					if (dqmanage_model) {
						r.push({
							text: dqmanage_model.label,
							attrs: {
								bgColor: "#DC6A71"
							}
						});
					}
					if (this.item.discount == 1) {
						r.push({
							text: "特惠",
							attrs: {
								bgColor: "#39C03E"
							}
						});
					}
				} catch (error) {}
				return r;
			},
		},
		methods: {
			levelTypestr() {
				let r = this.levelTypeList.find((item) => {
					return item.id == this.item.level3Type;
				});
				return r ? r.fullName : "";
			},
			goToDetail(id) {
				// uni.navigateTo({
				//   url: "/pages/shop/goods/detail/detail?id=" + id,
				// });
			},
			goToRelease() {

				if (this.item.transactionalMode == 2) {
					uni.navigateTo({
						url: "/pages/video/release/release?id=" + this.item.id
					});
					return
				}
				// console.log(123);
				uni.navigateTo({
					url: "/pages/release/release?id=" + this.item.id
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.price {
		margin: 10rpx 0 0 16rpx;
		color: rgb(227, 13, 13);
		font-size: 26rpx;
		height: 40rpx;
		font-family: "AllAndNone";

		.priceMin {
			font-size: 34rpx;
			margin-right: 4rpx;
			font-weight: bold;
		}

		.unit {
			font-size: 24rpx;
			color: #999;
		}

		.marketPrice {
			margin-left: 6rpx;
			font-size: 28rpx;
			color: rgb(153, 153, 153);
			text-decoration: line-through;
		}

		.spec {
			font-size: 24rpx;
		}
	}

	.item {
		position: relative;
		margin: 20rpx;
		// width: 346rpx;
		// height: 506rpx;
		border-radius: 8rpx;
		background-color: #ffffff;
		margin-top: 24rpx;
		font-size: 28rpx;
		overflow: hidden;
		padding: 0 20rpx;

		//   padding-bottom: 0;
		&>image:nth-child(1) {
			width: 346rpx;
			height: 346rpx;
			border-radius: 8rpx 8rpx 0 0;
		}

		&>image:nth-last-child(2) {
			position: absolute;
			bottom: 32rpx;
			right: 22rpx;
			width: 24rpx;
			height: 6rpx;
		}

		.labelbox {
			padding-left: 20rpx;

			text {
				display: inline-block;
				border-radius: 4rpx;
				// background-color: #d96b6c;
				color: #ffffff;
				margin-right: 10rpx;
				text-align: center;
				height: 32rpx;
				padding: 0 10rpx;
				line-height: 32rpx;
				font-size: 24rpx;
			}
		}

		.title,
		.subtitle {
			width: 346rpx;
			padding-left: 16rpx;
			padding-right: 6rpx;
			white-space: nowrap;
			text-overflow: ellipsis;
			-webkit-box-pack: center;
			overflow: hidden;
		}

		.title {
			font-size: 30rpx;
			color: rgb(51, 51, 51);
			line-height: 42rpx;
			margin-top: 6rpx;
			display: flex;
			width: 100%;
			justify-content: space-between;
			align-items: center;
		}

		.subtitle {
			font-size: 26rpx;
			color: rgb(153, 153, 153);
			margin-top: 4rpx;
			line-height: 36rpx;
		}

		.price {
			margin: 10rpx 0 0 16rpx;
			color: rgb(227, 13, 13);
			font-size: 26rpx;
			height: 40rpx;
			font-family: "AllAndNone";

			.priceMin {
				font-size: 34rpx;
				margin-right: 4rpx;
				font-weight: bold;
			}

			.marketPrice {
				margin-left: 6rpx;
				font-size: 28rpx;
				color: rgb(153, 153, 153);
				text-decoration: line-through;
			}

			.spec {
				font-size: 24rpx;
			}
		}

		.menu {
			position: absolute;
			display: none;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.6);
			z-index: 2;

			view {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 300rpx;
				height: 70rpx;
				margin: 16rpx auto;
				border-radius: 70rpx;
				background-color: #ffffff;
			}

			text {
				display: block;
				width: 140rpx;
				margin-left: 8rpx;
			}

			image {
				width: 32rpx;
				height: 32rpx;
			}
		}
	}

	.content {
		padding: 20rpx 0;
	}

	.btnbox {
		border-top: 2rpx solid #eee;
		justify-content: space-between;
		height: 100rpx;

		.effectDate {
			font-size: 24rpx;
			color: #999;

			.day {
				color: #39C03E;
			}

			.dayerr {
				color: #dd524d;
			}
		}
	}

	// }
</style>